<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/h.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/normal.min.css" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			.container {
				height: 90%;
				background: transparent;
				position: relative;
			}
			
			.form_center {
				padding-top: 10%;
				width: 90%;
				height: 100%;
				position: absolute;
				left: calc(50% - 45%);
				top: calc(50% - 50%);
			}
			
			.flex_a {
				display: flex;
			}
			
			#forget {
				flex: 1;
				line-height: 30px;
				text-align: right;
				margin-top: 10px;
				margin-right: 5px;
			}
			
			#reg {
				flex: 1; 
				line-height: 30px;
				text-align: left;
				margin-top: 10px;
				margin-left: 5px;
			}
			
			.button {
				margin-top: 10px;
			}
			
			.otherlogin {
				position: absolute;
				left: 10px;
				bottom: 5px;
			}
			
			.otherlogin a {
				display: inline-block;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				statusBarBackground: '#9defbcg',
				//监听Android手机的back、menu按键
				keyEventBind: {
					backbutton: false, //Boolean(默认true)关闭back按键监听
					menubutton: false //Boolean(默认true)关闭menu按键监听
				},
			});
		</script>
	</head>

	<body>
		<div class="mui-content">
			<div class="form_center">
				<form class="mui-input-group container">
					<div class="mui-input-row">
						<label class="mui-text-left"><i class=" mui-icon mui-icon-person"></i>用户名</label>
						<input type="text" class="mui-input-clear" id="account" placeholder="请输入用户名">
					</div>
					<div class="mui-input-row">
						<label class="mui-text-left"><i class="mui-icon mui-icon-locked"></i>密码</label>
						<input type="password" class="mui-input-password" id="password" placeholder="请输入密码">
					</div>
					<div class="flex_a">
						<a href="" id="reg"> <i class="mui-icon mui-icon-paperplane"></i>注册</a>
						<a href="" id="forget"><i class="mui-icon mui-icon-help"></i>忘记密码?</a>
					</div>
					<div class="mui-button-row button">
						<button type="button" class="mui-btn mui-btn-primary" id="btn_Sure">确认</button>
						<button type="button" class="mui-btn mui-btn-danger" id="cancel">取消</button>
					</div>
					<div class="otherlogin">
						<a href=""><i class="mui-icon mui-icon-qq"></i></a>
						<a href=""><i class="mui-icon mui-icon-weixin"></i></a>
					</div>
				</form>

			</div>

		</div>

		<script>
			mui.plusReady(function() {
			 
				document.getElementById('cancel').addEventListener('tap', function() {
					document.getElementById('account').value = "";
					document.getElementById('password').value = "";
				})
				document.getElementById("btn_Sure").addEventListener('tap', function() {
					var account = document.getElementById('account').value;
					var pwd = document.getElementById('password').value;
					if(!account) {
						mui.alert("用户名不能为空", function() {});
						return false;
					}
					if(!pwd) {
						mui.alert("密码不能为空");
						return false;
					}
					mui.ajax(
						'http://116.62.191.91/index/Account/loginDeal.html', {
							async: false,
							crossDomain: true,
							xhrFields: {
								withCredentials: true
							},
							data: {
								"account": account,
								"password": pwd
							},
							dataType: 'json',
							type: 'post',
							timeout: 4000,
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								
								if(data.status == "success") {
									mui.toast('登陆成功', {
										duration: 'short',
										type: 'div'
									})
									mui.openWindow({
										url: 'page/index.html',
										id: 'index',
										extras: {
											message: data.status,
											version: '0.0.1',
											title: data.role
											//自定义扩展参数，可以用来处理页面间传值
										},
										//  createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
										show: {
											autoShow: true, //页面loaded事件发生后自动显示，默认为true
											aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
											duration: 150 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
										},
									})
								}
								if(data.status != 'success') {
									//mui.alert("错误");
									mui.toast('登陆失败', {
										duration: 'short',
										type: 'div'
									})
								}
								plus.nativeUI.closeWaiting();
							},
							error: function(xhr, type, errorThrown) {
								mui.toast('登陆失败', {
									duration: 'short',
									type: 'div'
								})
							}
						}
					)
				});
			})
		</script>
	</body>

</html>